<template>
    <div>
<Row class="toolBar" justify="space-between">
            <i-col span="12">
                <Tooltip  content="查看详细" placement="bottom-start" transfer>
                    <Button type="ghost" >
                        <Icon type="clipboard"></Icon>
                    </Button>
                </Tooltip>
            </i-col>
            <i-col span="12">
                <Button-group style="float: right;">
                    <Tooltip content="刷新" placement="bottom-start" transfer>
                        <Button type="ghost" @click="refresh">
                            <Icon type="loop"></Icon>
                        </Button>
                    </Tooltip>
                    <Tooltip content="导出全部数据" placement="bottom-start" transfer>
                        <Button type="ghost" @click="exportData(1)">
                            <Icon type="arrow-down-a"></Icon>
                        </Button>
                    </Tooltip>
                    <Tooltip content="导出当前页数据" placement="bottom-start" transfer>
                        <Button type="ghost" @click="exportData(2)">
                            <Icon type="ios-download-outline"></Icon>
                        </Button>
                    </Tooltip>
                    </Button-group>
            </i-col>
        </Row>
        <i-table ref="table" border :columns="column" :data="dataAll" :loading="loading"></i-table>
    </div>
</template>

<script>
import {
  timeFormat
} from '@/common/filter'
    export default {
        name: 'receivitem',
        data() {
            return {
                column: [
                    {
                        type: "index",
                        width: 60,
                        align: "center",
                        title: "排序"
                    }, 
                    {
                        title: "负责人",
                        key: "Creater"
                    },
                    {
                        title: "订单创建时间",
                        key: "Ctime",
                        render: (h, params) => {
                            return h('div', [
                            h('strong', timeFormat(params.row.Ctime))
                            ]);
                        }
                    },
                    {
                        title: "应付款时间",
                        key: "Date",
                        render: (h, params) => {
                            return h('div', [
                            h('strong', timeFormat(params.row.Date))
                            ]);
                        }
                    },
                    {
                        title: "金额",
                        key: "Money",
                        render: (h, params) => {
                            return h('div', [
                            h('strong', "￥"+ params.row.Money)
                            ]);
                        }
                    },
                    {
                        title: "当前状态",
                        key: "Status",
                        render: (h, {row}) => {
                            let color = row.Status == 1 ? 'yellow':'green'
                            let str = row.Status == 1 ? "未回款" : "已回款";
                            return h(
                                "Tag",
                                {
                                    props: {
                                    type: "dot",
                                    color: color
                                    }
                                },
                                str
                            );
                        }
                    },
                    {
                        title: "备注",
                        key: "Remark"
                    },
                    {
                        title: '操作',
                        render: (h, params) => {
                            return h('Button', {
                                props: {
                                    type: "info",
                                    size: "small",
                                    disabled: params.row.Status == 1 ? false: true
                                },
                                style: {
                                    marginRight: '5px'
                                },
                                on: {
                                    click: () => {
                                        this.itempay(params.row.Id)
                                    }
                                }
                            }, "确认回款")
                        }
                    }               
                ],
                dataAll: [],
                loading: false
            }
        },
        computed: {
            buyId() {
                return this.$route.params.BusyId 
            }
        },
        methods: {
            getAll() {
                let data = {
                    buyId: this.buyId 
                }
                this.loading = true
                this.$api.getReceivItemByBusyId(data).then( res => {
                    if (!res.error) {
                        this.dataAll = res.Data
                    } else {
                        this.$Message.error(res.message);
                    }
                    this.loading = false;
                })
            },
            exportData(type) {
                if (type === 1) {
                    this.$refs.table.exportCsv({
                    filename: "原始数据",
                    quoted: true
                    //            columns: this.columns.filter((col, index) => index < 5),
                    //            data: this.thisTableData,
                    });
                } else if (type === 2) {
                    this.$refs.table.exportCsv({
                    filename: "排序和过滤后的数据",
                    original: false,
                    quoted: true
                    });
                }
            },
            refresh() {
                 this.getAll()
            },
            itempay(id) {
                let data = {
                    id
                }
                this.$api.itemreceiv(data).then( res=> {
                    if (!res.error) {
                        // this.dataAll = res.Data
                        this.$Message.success("付款成功！")
                         this.getAll()
                    } else {
                        this.$Message.error(res.message);
                    }
                })
            }
        },
        mounted() {
            this.getAll()
        }
    }
</script>

<style scoped>
.toolBar {
  margin-bottom: 10px;
}

.ivu-dropdown {
  margin: 0px;
}

.tCheck {
  padding-left: 10px;
  float: left;
  clear: left;
  z-index: 9999;
}
</style>